<template>
    <view style="height: 100%">
        <slot name="content" />
        <view mut-bind:tap="onLoadmore" v-if="showClone">
            <view v-if="customClone && typeClone === 'end'">
                <slot name="end" />
            </view>
            <view v-else-if="customClone && typeClone === 'loading'">
                <slot name="loading" />
            </view>
            <view class="loading l-class" v-else>
                <view class="line loading-view" :style="'background-color:' + colorClone" v-if="lineClone"></view>
                <view
                    class="rotate loading-view"
                    :style="'border-color: ' + colorClone + ';width:' + sizeClone + 'rpx;height:' + sizeClone + 'rpx'"
                    v-if="typeClone == 'loading'"
                ></view>
                <view class="loading-text l-loading-class loading-view" :style="'color:' + colorClone + ';font-size:' + sizeClone + 'rpx'" v-if="typeClone == 'loading'">
                    {{ loadingTextClone }}
                </view>
                <view class="loading-text l-end-class loading-view" :style="'color:' + colorClone + ';font-size:' + sizeClone + 'rpx'" v-if="typeClone == 'end'">
                    {{ endTextClone }}
                </view>
                <view class="line l-line-class loading-view" :style="'background-color:' + colorClone" v-if="lineClone"></view>
            </view>
        </view>
    </view>
</template>

<script>
import lLoading from '../loading/index';
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            loadingTextClone: '',
            endTextClone: '',
            showClone: '',
            customClone: '',
            typeClone: '',
            colorClone: '',
            lineClone: '',
            sizeClone: ''
        };
    },
    externalClasses: ['l-class', 'l-loading-class', 'l-end-class', 'l-line-class'],
    options: {
        multipleSlots: true
    },
    mixins: [validator],
    props: {
        show: Boolean,
        custom: Boolean,
        line: Boolean,
        color: String,
        size: {
            type: String,
            default: '28'
        },
        type: {
            type: String,
            default: 'loading',
            options: ['loading', 'end']
        },
        endText: {
            type: String,
            default: '我是有底线的~'
        },
        loadingText: {
            type: String,
            default: '加载中...'
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            this._init();
        },

        _init() {
            uni.lin = uni.lin || {};
            uni.lin.showLoadmore = (e) => {
                const {
                    custom: o = false,
                    line: t = false,
                    color: i = '',
                    size: l = '28',
                    type: a = 'loading',
                    endText: n = '我是有底线的',
                    loadingText: s = '加载中...'
                } = {
                    ...e
                };
                this.setData({
                    customClone: o,
                    lineClone: t,
                    colorClone: i,
                    sizeClone: l,
                    typeClone: a,
                    endTextClone: n,
                    loadingTextClone: s,
                    showClone: true
                });
            };
            uni.lin.hideLoadmore = () => {
                this.setData({
                    showClone: false
                });
            };
        },

        onLoadmore() {
            this.$emit(
                'lintap',
                {
                    detail: {}
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },
    created: function () {}
};
</script>
<style>
.loadmore-container {
    display: flex;
    flex-direction: column;
    background-color: transparent;
}
.loading {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 72rpx;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}
.loading .loading-view:nth-child(2) {
    margin-left: 36rpx;
}
.loading-text {
    color: #bbb;
    font-size: 28rpx;
    margin: 0 12rpx;
}
.line {
    width: 80rpx;
    height: 2rpx;
    background-color: #d1d3d7;
}
.rotate {
    border-radius: 50%;
    animation: rotate 0.7s linear infinite;
    height: 28rpx;
    width: 28rpx;
    border-top: 4rpx solid #bbb;
    border-right: 4rpx solid transparent !important;
    border-bottom: 4rpx solid #bbb;
    border-left: 4rpx solid #bbb;
    margin-left: 12rpx;
}
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
